<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="admin/head :: head"></div>

    <title>视频表单</title>
</head>
<body>
<div class="x-body layui-anim layui-anim-up">
    <form class="layui-form">
        <input type="hidden" name="id" th:value="${video eq null ? '' : video.id}"/>
        <input type="hidden" name="filtrate" th:value="${video eq null ? '' : video.filtrate}"/>

        <div class="layui-form-item">
            <label for="L_name" class="layui-form-label">
                视频名称
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_name" name="name" required="" lay-verify="name" autocomplete="off" class="layui-input" th:value="${video eq null ? '' : video.name}">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_author" class="layui-form-label">
                作者
            </label>
            <div class="layui-input-inline">
                <select class="layui-select" name="author" id="L_author" lay-verify="required">
                    <option value="">请选择</option>
                    <option th:each="item, index:${users}" th:value="${item.id}" th:text="${item.nickname}" th:selected="${video ne null and video.author eq item.id}"></option>
                </select>
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_type" class="layui-form-label">
                视频类型
            </label>
            <div class="layui-input-inline">
                <select class="layui-select" name="type" id="L_type" lay-verify="required">
                    <option value="">请选择</option>
                    <option value="" th:each="item:${dictionaries}" th:value="${item.value}" th:label="${item.name}" th:selected="${video ne null and video.type eq item.value}"></option>
                </select>
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_url" class="layui-form-label">
                URL
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_url" name="url" required="" lay-verify="url" autocomplete="off" class="layui-input" th:value="${video eq null ? '' : video.url}" placeholder="URL长度为1-200">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_title" class="layui-form-label">
                简介
            </label>
            <div class="layui-input-inline" style="width: 50%;">
                <textarea placeholder="简介为1-75个字" id="L_title" name="title" required="" lay-verify="title" class="text-area">[[${video eq null ? '' : video.title}]]</textarea>
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_description" class="layui-form-label">
                描述
            </label>
            <div class="layui-input-inline" style="width: 50%;">
                <textarea placeholder="描述为6-999个字" id="L_description" name="description" required="" lay-verify="description" class="text-area">[[${video eq null ? '' : video.description}]]</textarea>
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_order" class="layui-form-label">
                排序(从高到低)
            </label>
            <div class="layui-input-inline">
                <input type="number" id="L_order" name="order" lay-verify="num" autocomplete="off" class="layui-input" th:value="${video eq null ? '' : video.order}">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_price" class="layui-form-label">
                原价
            </label>
            <div class="layui-input-inline">
                <input type="number" id="L_price" name="price" lay-verify="num" autocomplete="off" class="layui-input" th:value="${video eq null ? '' : video.price}">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_discounts" class="layui-form-label">
                优惠
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_discounts" name="discounts" lay-verify="num" autocomplete="off" class="layui-input" th:value="${video eq null ? '' : video.discounts}">
            </div>
        </div>

        <!--<div class="layui-form-item">
            <label for="L_spriteUrl" class="layui-form-label">
                视频封面
            </label>

            <div class="layui-upload">
                <div class="layui-input-block ">
                    <input class="layui-input" type="hidden" name="spriteUrl" id="L_spriteUrl" th:value="${production eq null ? '' : production.spriteUrl}" required="" lay-verify="img" autocomplete="off" >
                    <img th:if="${production ne null and production.spriteUrl ne null}" th:src="${#request.getAttribute('uploadServer')} + ${production.spriteUrl}" id="L_spriteUrl_pic"  width="210px" height="300px" />
                    <img th:if="${production eq null or production.spriteUrl eq null}" th:src="${#request.getAttribute('ctx') + '/static/front/img/default_head.jpg'}" id="L_spriteUrl_pic"  width="210px" height="300px" />
                    <input type="button" value="上传图片" id="upload"/> (210px × 300px)<span class="x-red">*</span>
                </div>
            </div>
        </div>-->

        <input value="1" id="spriteUrl_width" type="hidden">
        <input value="1" id="spriteUrl_height" type="hidden">
        <input value="82" id="spriteUrl_top" type="hidden">
        <input value="73" id="spriteUrl_left" type="hidden">
        <input value="120" id="spriteUrl_DropWidth" type="hidden">
        <input value="120" id="spriteUrl_DropHeight" type="hidden">
        <div class="layui-form-item">
            <label for="L_spriteUrl" class="layui-form-label">
                视频封面
            </label>
            <div class="layui-input-inline width-600">
                <input type="hidden" name="spriteUrl" id="L_spriteUrl" th:value="${video ne null ? video.spriteUrl : ''}" required="" lay-verify="img" autocomplete="off" class="">
                <input type="hidden" id="L_old_spriteUrl" th:value="${video ne null ? video.spriteUrl : ''}" autocomplete="off" class="">
                <div class="jcrop-div">
                    <div class="pic-btn">
                        <button type="button" class="invisible" id="L_spriteUrl_upload" value="选择图片"></button><span class="x-red">*</span>
                    </div>
                    <div class="pic-img">
                        <img class="pictureWrap" th:if="${video ne null and video.spriteUrl ne null}" th:src="${#request.getAttribute('uploadServer')} + ${video.spriteUrl}"
                             id="L_spriteUrl_pic" style="height: 300px; width: 240px; display: block;"/>
                        <img class="pictureWrap" th:if="${video eq null or video.spriteUrl eq null}" th:src="${#request.getAttribute('ctx') + '/static/front/img/default_head.jpg'}"
                             id="L_spriteUrl_pic" style="height: 300px; width: 240px; display: block;"/>
                    </div>
                    <div id="L_spriteUrl_preview_pane" class="preview-pane1">
                        <div class="preview-container w126h180">
                            <img id="L_spriteUrl_jcrop_preview" th:src="${#request.getAttribute('ctx') + '/static/front/img/default_portrait.png'}" class="jcrop-preview"/>
                        </div>
                    </div>
                </div>
            </div>
            <button id="L_spriteUrl_jcrop_destroy" type="button"></button>
        </div>

        <!--<div class="layui-form-item">
            <label for="L_spriteUrl2" class="layui-form-label">
                视频封面2
            </label>

            <div class="layui-upload">
                <div class="layui-input-block ">
                    <input class="layui-input" type="hidden" name="spriteUrl2" id="L_spriteUrl2" th:value="${production eq null ? '' : production.spriteUrl2}" required="" lay-verify="img" autocomplete="off" >
                    <img th:if="${production ne null and production.spriteUrl2 ne null}" th:src="${#request.getAttribute('uploadServer')} + ${production.spriteUrl2}" id="L_spriteUrl_pic2"  width="490px" height="335px" />
                    <img th:if="${production eq null or production.spriteUrl2 eq null}" th:src="${#request.getAttribute('ctx') + '/static/front/img/default_head.jpg'}" id="L_spriteUrl_pic2"  width="490px" height="335px" />
                    <input type="button" value="上传图片" id="upload2"/> (490px × 335px)<span class="x-red">*</span>
                </div>
            </div>
        </div>-->

        <input value="1" id="spriteUrl2_width" type="hidden">
        <input value="1" id="spriteUrl2_height" type="hidden">
        <input value="82" id="spriteUrl2_top" type="hidden">
        <input value="73" id="spriteUrl2_left" type="hidden">
        <input value="120" id="spriteUrl2_DropWidth" type="hidden">
        <input value="120" id="spriteUrl2_DropHeight" type="hidden">
        <div class="layui-form-item">
            <label for="L_spriteUrl2" class="layui-form-label">
                视频封面2
            </label>
            <div class="layui-input-inline width-600">
                <input type="hidden" name="spriteUrl2" id="L_spriteUrl2" th:value="${video ne null ? video.spriteUrl2 : ''}" required="" lay-verify="img" autocomplete="off" class="">
                <input type="hidden" id="L_old_spriteUrl2" th:value="${video ne null ? video.spriteUrl2 : ''}" autocomplete="off" class="">
                <div class="jcrop-div">
                    <div class="pic-btn">
                        <button type="button" class="invisible" id="L_spriteUrl2_upload" value="选择图片"></button><span class="x-red">*</span>
                    </div>
                    <div class="pic-img">
                        <img class="pictureWrap" th:if="${video ne null and video.spriteUrl2 ne null}" th:src="${#request.getAttribute('uploadServer')} + ${video.spriteUrl2}"
                             id="L_spriteUrl2_pic" style="height: 220px; width: 300px; display: block;"/>
                        <img class="pictureWrap" th:if="${video eq null or video.spriteUrl2 eq null}" th:src="${#request.getAttribute('ctx') + '/static/front/img/default_head.jpg'}"
                             id="L_spriteUrl2_pic" style="height: 220px; width: 300px; display: block;"/>
                    </div>
                    <div id="L_spriteUrl2_preview_pane" class="preview-pane1">
                        <div class="preview-container w247h169">
                            <img id="L_spriteUrl2_jcrop_preview" th:src="${#request.getAttribute('ctx') + '/static/front/img/default_portrait.png'}" class="jcrop-preview"/>
                        </div>
                    </div>
                </div>
            </div>
            <button id="L_spriteUrl2_jcrop_destroy" type="button"></button>
        </div>


        <div class="layui-form-item">
            <button class="layui-btn" lay-filter="add" lay-submit="">
                保存
            </button>
        </div>
    </form>
</div>
<link rel="stylesheet"
      th:href="${#request.getAttribute('ctx') + '/static/common/kindeditor/themes/default/default.css'}">
<link rel="stylesheet" th:href="${#request.getAttribute('ctx') + '/static/common/Jcrop-0.9.12/jquery.Jcrop.min.css'}">


<script type="text/javascript"
        th:src="${#request.getAttribute('ctx') + '/static/common/kindeditor/kindeditor-all-min.js'}"></script>
<!-- Jcrop -->
<script type="text/javascript"
        th:src="${#request.getAttribute('ctx') + '/static/common/Jcrop-0.9.12/jquery.Jcrop.min.js'}"></script>

<script>

    // 210 × 300
    /*initSimpleImageUpload('upload', 'kpoint-cover', function(btnId, imgUrl) {
        $("#L_spriteUrl").val(imgUrl);
        $("#L_spriteUrl_pic").attr("src", fileServer + imgUrl);
    },'',true,'210','300');*/

    // 165 × 110
    /*initSimpleImageUpload('upload2', 'kpoint-cover', function(btnId, imgUrl) {
        $("#L_spriteUrl2").val(imgUrl);
        $("#L_spriteUrl_pic2").attr("src", fileServer + imgUrl);
    },'',true,'490','335');*/

    // 视频封面
    webImageUpload('L_spriteUrl_upload', 'temp&cutImg=true&scaleType=scale&scale=0.7', calTitleImg, '#L_spriteUrl', '#L_spriteUrl_pic', '#L_spriteUrl_preview_pane', '#L_spriteUrl_jcrop_preview', '#L_spriteUrl_jcrop_destroy', 204/294);

    // 视频封面
    webImageUpload('L_spriteUrl2_upload', 'temp&cutImg=true&scaleType=scale&scale=0.7', calTitleImg, '#L_spriteUrl2', '#L_spriteUrl2_pic', '#L_spriteUrl2_preview_pane', '#L_spriteUrl2_jcrop_preview', '#L_spriteUrl2_jcrop_destroy', 485/334);

    function saveSpriteUrl(json) {
        if (json.error != 0) {
            layer.alert(json.message, {icon: 1, time: 3000});
            return;
        }
        $('#L_spriteUrl').val(json.src);
    }

    function saveSpriteUrl2(json) {
        if (json.error != 0) {
            layer.alert(json.message, {icon: 1, time: 3000});
            return;
        }
        $('#L_spriteUrl2').val(json.src);
    }

    var interval, formData, uploadCount = 0;

    function updateVideo() {
        clearInterval(interval);
        if (uploadCount < 2) {
            setInterval(interval, 300);
            return ;
        }
        $.ajax({
            type: 'post',
            url: '/admin/video/save',
            data: formData.field,
            dataType: 'json',
            beforeSend : function(xhr) {
                xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
            },
            success: function(result) {
                if(result.status == 200) {
                    layer.alert(Messages.SUCCESS, {icon: 6}, function () {
                        // get frame index
                        var index = parent.layer.getFrameIndex(window.name);
                        // refresh parent list and close current dialog
                        parent.location.reload();
                        parent.layer.close(index);
                    });
                } else {
                    layer.alert(result.error == null || result.error == undefined ? Messages.ERROR : result.error, {icon: 1});
                    return false;
                }
            },
            error: function(e) {
                layer.alert(Messages.ERROR, {icon: 1});
            }
        })
    }

    function uploadSpriteUrl() {
        var spriteUrlPath = $("#L_spriteUrl").val();
        var spriteUrlOldPath = $('#L_old_spriteUrl').val();
        if (spriteUrlPath == null || spriteUrlPath == '') {
            clearInterval(interval);
            layer.alert('请上传头像', {icon: 1, time: 3000});
            return;
        } else {
            if(spriteUrlPath != spriteUrlOldPath) {
                var params = "photoPath=" + spriteUrlPath
                    + "&txt_width=" + $("#spriteUrl_width").val()
                    + "&txt_height=" + $("#spriteUrl_height").val()
                    + "&txt_top=" + $("#spriteUrl_top").val()
                    + "&txt_left=" + $("#spriteUrl_left").val()
                    + "&txt_DropWidth=" + $("#spriteUrl_DropWidth").val()
                    + "&txt_DropHeight=" + $("#spriteUrl_DropHeight").val();
                $.ajax({
                    url: uploadServer + "/image/saveface",
                    type: 'get',
                    async: false,
                    data: params,
                    dataType: 'jsonp',//here
                    jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                    jsonpCallback: "saveSpriteUrl",
                    success: function (json) {
                        formData.field.spriteUrl = json.src;
                        uploadCount ++;
                    },
                    error: function (e) {
                        clearInterval(interval);
                        layer.alert('图片上传失败,请上传宽高均小于900像素,小于200kb的图片', {icon: 1, time: 3000});
                        return;
                    }
                });
            } else {
                uploadCount ++;
            }
        }
    }

    function uploadSpriteUrl2() {
        var spriteUrl2Path = $("#L_spriteUrl2").val();
        var spriteUrl2OldPath = $('#L_old_spriteUrl2').val();
        if (spriteUrl2Path == null || spriteUrl2Path == '') {
            clearInterval(interval);
            layer.alert('请上传头像', {icon: 1, time: 3000});
            return;
        } else {
            if(spriteUrl2Path != spriteUrl2OldPath) {
                var params = "photoPath=" + spriteUrl2Path
                    + "&txt_width=" + $("#spriteUrl2_width").val()
                    + "&txt_height=" + $("#spriteUrl2_height").val()
                    + "&txt_top=" + $("#spriteUrl2_top").val()
                    + "&txt_left=" + $("#spriteUrl2_left").val()
                    + "&txt_DropWidth=" + $("#spriteUrl2_DropWidth").val()
                    + "&txt_DropHeight=" + $("#spriteUrl2_DropHeight").val();
                $.ajax({
                    url: uploadServer + "/image/saveface",
                    type: 'get',
                    async: false,
                    data: params,
                    dataType: 'jsonp',//here
                    jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                    jsonpCallback: "saveSpriteUrl2",
                    success: function (json) {
                        formData.field.spriteUrl2 = json.src;
                        uploadCount ++;
                    },
                    error: function (e) {
                        clearInterval(interval);
                        layer.alert('图片上传失败,请上传宽高均小于900像素,小于200kb的图片', {icon: 1, time: 3000});
                        return;
                    }
                });
            } else {
                uploadCount ++;
            }
        }
    }

    layui.use(['form', 'layer', 'upload'], function(){
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;

        //自定义验证规则
        form.verify({
            name: [/(.+){1,199}$/, '名称为200个字以内'],
            description: [/(.+){6,75}$/, '描述为6到75个字'],
            url: [/(.+){1,199}$/, 'URL长度为1-200'],
            img: [/^\S+$/, '图片不能为空'],
            title: function(value) {
                if(value.length < 1 || value.length > 75) {
                    return '简介长度为1-75个字';
                }
            }
        });

        //监听提交
        form.on('submit(add)', function(data){
            formData = data;
            interval = setInterval(updateVideo, 300);
            uploadSpriteUrl();
            uploadSpriteUrl2();
            return false;
        });
    });
</script>

</body>
</html>